<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>${product.name} - ${systemName}</title>
    <link href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap-icons/font/bootstrap-icons.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/client.css">
    <style>

    </style>
</head>
<body>
<jsp:include page="/WEB-INF/views/client/common/nav.jsp"/>
<!-- 商品详情内容 -->
<div class="container mt-4 my-5">
    <div class="row">
        <!-- 商品图片 -->
        <div class="col-md-5">
            <div class="card border-0">
                <div class="ratio ratio-1x1 bg-light">
                    <img
                    <c:choose>
                    <c:when test="${product.image != null && product.image.contains('.')}">
                            src="${pageContext.request.contextPath}/image/product/${product.image}"
                    </c:when>
                    <c:otherwise>
                           src="${pageContext.request.contextPath}/public?method=image&id=${product.image}"
                    </c:otherwise>
                    </c:choose>
                            class="card-img-top p-4 object-fit-contain"
                            alt="${product.name}">
                </div>

            </div>
        </div>

        <!-- 商品信息 -->
        <div class="col-md-7">
            <h2 class="fw-bold mb-3">${product.name}</h2>

            <div class="mb-4">
                <span class="text-danger fs-3 fw-bold">¥${product.price}</span>
                <span class="text-muted text-decoration-line-through ms-2">¥${product.price+20}</span>
                <span class="badge bg-danger ms-2">促销</span>
            </div>

            <div class="mb-4">
                <div class="card border-0 bg-light">
                    <div class="card-body p-0">
                        <h5>${product.description}</h5>
<%--                        <table class="table table-bordered mb-0">--%>
<%--                            <tbody>--%>
<%--                            <tr>--%>
<%--                                <th scope="row" class="w-25 bg-light">商品描述</th>--%>
<%--                                <td>${product.description}</td>--%>
<%--                            </tr>--%>
<%--                            <tr>--%>
<%--                                <th scope="row" class="bg-light">作者</th>--%>
<%--                                <td>${product.author}</td>--%>
<%--                            </tr>--%>
<%--                            <tr>--%>
<%--                                <th scope="row" class="bg-light">出版社</th>--%>
<%--                                <td>${product.publisher}</td>--%>
<%--                            </tr>--%>
<%--                            <tr>--%>
<%--                                <th scope="row" class="bg-light">出版日期</th>--%>
<%--                                <td>${product.publishDate}</td>--%>
<%--                            </tr>--%>
<%--                            <tr>--%>
<%--                                <th scope="row" class="bg-light">ISBN</th>--%>
<%--                                <td>${product.isbn}</td>--%>
<%--                            </tr>--%>
<%--                            </tbody>--%>
<%--                        </table>--%>
                    </div>
                </div>
            </div>

<%--            <div class="d-flex align-items-center mb-3">--%>
<%--                <span class="me-3">数量:</span>--%>
<%--                <div class="input-group" style="width: 120px;">--%>
<%--                    <button class="btn btn-outline-secondary" type="button" id="decrease">-</button>--%>
<%--                    <input type="text" class="form-control text-center" value="1" id="quantity">--%>
<%--                    <button class="btn btn-outline-secondary" type="button" id="increase">+</button>--%>
<%--                </div>--%>
<%--            </div>--%>
            <div class="mt-3 d-flex justify-content-start">
                <a href="${pageContext.request.contextPath}/client/cart?method=create&productId=${product.id}"
                   class="btn btn-danger btn-lg px-5">
                    <i class="bi bi-cart-plus"></i> 加入购物车
                </a>
            </div>
        </div>
    </div>

    <!-- 商品描述 -->
<%--    <div class="row mt-5">--%>
<%--        <div class="col-12">--%>
<%--            <div class="card border-0">--%>
<%--                <div class="card-header bg-white border-bottom">--%>
<%--                    <ul class="nav nav-tabs card-header-tabs">--%>
<%--                        <li class="nav-item">--%>
<%--                            <a class="nav-link active" href="#description" data-bs-toggle="tab">商品详情</a>--%>
<%--                        </li>--%>
<%--                        <li class="nav-item">--%>
<%--                            <a class="nav-link" href="#reviews" data-bs-toggle="tab">用户评价</a>--%>
<%--                        </li>--%>
<%--                    </ul>--%>
<%--                </div>--%>
<%--                <div class="card-body tab-content">--%>
<%--                    <div class="tab-pane active" id="description">--%>
<%--                        ${product.description}--%>
<%--                    </div>--%>
<%--                    <div class="tab-pane" id="reviews">--%>
<%--                        <c:choose>--%>
<%--                            <c:when test="${not empty reviews}">--%>
<%--                                <c:forEach items="${reviews}" var="review">--%>
<%--                                    <div class="mb-3 border-bottom pb-3">--%>
<%--                                        <div class="d-flex justify-content-between">--%>
<%--                                            <strong>${review.userName}</strong>--%>
<%--                                            <small class="text-muted">${review.createTime}</small>--%>
<%--                                        </div>--%>
<%--                                        <div class="my-2">--%>
<%--                                            <c:forEach begin="1" end="${review.rating}">--%>
<%--                                                <i class="bi bi-star-fill text-warning"></i>--%>
<%--                                            </c:forEach>--%>
<%--                                        </div>--%>
<%--                                        <p>${review.content}</p>--%>
<%--                                    </div>--%>
<%--                                </c:forEach>--%>
<%--                            </c:when>--%>
<%--                            <c:otherwise>--%>
<%--                                <p class="text-muted">暂无评价</p>--%>
<%--                            </c:otherwise>--%>
<%--                        </c:choose>--%>
<%--                    </div>--%>
<%--                </div>--%>
<%--            </div>--%>
<%--        </div>--%>
<%--    </div>--%>
</div>

<jsp:include page="/WEB-INF/views/client/common/footer.jsp"/>

<script>
  // 数量增减功能
  document.getElementById('increase').addEventListener('click', function() {
    var quantityInput = document.getElementById('quantity');
    var current = parseInt(quantityInput.value);
    quantityInput.value = current + 1;
  });

  document.getElementById('decrease').addEventListener('click', function() {
    var quantityInput = document.getElementById('quantity');
    var current = parseInt(quantityInput.value);
    if (current > 1) {
      quantityInput.value = current - 1;
    }
  });
</script>
</body>
</html>
